<template>
  <v-row>
    <v-col cols='12' class='pb-0'>
      <v-text-field
        label='用户ID'
        persistent-hint
        @change='inputChange'
        v-model='_modelUserId'
      />
    </v-col>
    <v-col v-if='foundUser' class='pt-0' cols='12'>
      {{foundUser['NICK_NAME']}} , {{foundUser['EMAIL']}}
    </v-col>
  </v-row>
</template>

<script>
  import userApi from '@/api/apiPath/userApi'

  export default {
    name: 'SearchUserInput',
    props: {
      user: {
        default: {}
      },
      modelUserId: {
        type: String
      }
    },
    data() {
      return {
        foundUser: null
      }
    },
    watch: {
      foundUser: {
        handler(val) {
          this.$emit('enableBtn',!val);
        },
        deep: true
      }
    },
    computed: {
      _modelUserId: {
        get() {
          return this.modelUserId
        },
        set(val) {
          this.$emit('inputOnChange',val)
        }
      }
    },
    methods: {
      async inputChange() {
        console.log(this._modelUserId)
        if (this._modelUserId && this._modelUserId !== this.user.id) {
          const { data: result } = await userApi.getUserById(this._modelUserId)
          if (JSON.stringify(result) !== '{}') {
            this.foundUser = result
          } else {
            this.foundUser = null
          }
        } else {
          this.foundUser = null
        }
      }
    }
  }
</script>

<style scoped>

</style>
